<!--
	设备详情
-->
<style>
 *{
     list-style: none;
 }

    .vice-page2 {
        height: 45px;
        width: 1110px;
        background: #f5fafe;
        border: 1px solid #eee;
    }

    .page2-button {
        float: left;
        height: 40px;
        margin: 5px;
        height: 30px;
        width: 210px;
    }

    .page2-button button {
        height: 35px;
        width: 90px;
        margin-left: 10px;
    }



    .page2-text {
        float: right;
        margin-right: 15px;
        height: 45px;
        line-height: 45px;
        text-align: center;
    }

    .vice-page3 {
        height: 65px;
        width: 1110px;
    }

    .page3-left {
        float: left;
        height: 65px;
        line-height: 65px;
        text-align: center;
    }

    .page3-left select {
        width: 50px;
        height: 30px;
    }

    .page3-right input {
        height: 30px;
        width: 200px;
        font-size: 16px;
    }

    .page3-right input:hover {
        border: 1px solid #28A4C9;
    }

    .vice-page4 {
        height: 500px;
        width: 1100px;
    }

    .vice-page4 li {
        float: left;
        height: 200px;
        border: 1px solid #000000;
        border-radius: 3px;
        width: 210px;
        margin-left: 30px;
        margin-top: 15px;
        padding: 12px;
    }

    .vice-page4 p {
        width: 100%;
        height: 20px;
    }

    .vice-page4 p button {
        width: 65px;
        height: 30px;
        margin-top: 10px;
        border-radius: 5px;
    }



    .page5_button span {
        border: 1px solid #D5D5D5;
        width: 10px;
        height: 15px;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .page5_button button {
        width: 80px;
        height: 30px;
        border-radius: 5px;
        background: #5a98de;
        border: 1px solid #5a98de;
    }

    .page5_button button:hover {
        background: #2e6da4;
    }
    .stateBgColor{
    	font-size: normal;
    }
</style>
<button class="btn btn-primary">刷新</button>

<div class="vice-page1">
    <div class="data-distance">
    	
        <span>日期范围：</span>
        <input type="date" id="startTime" name="startTime" value=""/>
        <input type="date" id="endTime" name="endTime" value=""/>
        <button class="btn btn-success SelectDate" >
            <img src="../Static/img/搜索.png"/>&nbsp;
            搜索
        </button>
        
    </div>
</div>
<div class="vice-page2">
    <div class="page2-button">
        <button class="btn btn-danger">
            <img src="../Static/img/垃圾箱(1).png"/>
            批量删除
        </button>
        
    </div>
    <div class="page2-text">
        共有数据：<span>2</span>条
    </div>
</div>
<div class="vice-page3">
    <div class="page3-left">
        <span>显示</span>
        <select id="SelectSize">
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="15">15</option>
            <option value="20">20</option>
        </select>
        <span>条</span>
    </div>
</div>
<div class="vice-page4">
	<ul id="equipmentListmodel">
		 <!--<li >
            <p>设备图片</p>
            <p>设备名称</p>
            <p>设备序列号</p>
            <p>运行状态</p>
            <p>
                <button class="btn btn-primary">修改</button>
                <button class="btn btn-danger">删除</button>
            </p>
        </li>-->
	</ul>
   
</div>
<div class="page" data-src="../Model/page.htm"></div>
<script>
    $(function () {
        $(".page").load($(".page").attr("data-src"));
        
        
        
        var $page = 0;
        var $size = 5;
        var $startTime = 0;
        var $endTime = 0;
        //获取开始查询时间
         $("#startTime").change(function(){
         	$startTime=$("#startTime").val();
         	$startTime=Date.parse($startTime);
         })
         //获取结束查询时间
         $("#endTime").change(function(){
         	$endTime=$("#endTime").val();
         	$endTime=Date.parse($endTime);
         })
         //获取显示记录的条数
         $("#SelectSize").change(function(){
         	$size=$("#SelectSize").val();
         })
         
         //根据时间分页查询所有设备
         searchEquipment()
         function searchEquipment(){
         	$(".SelectDate").click(function(){
        	$.ajax({
        		type:"get",
        		url:"/equipment/gets.do",
        		data:{
        			"startTime":$startTime,
        			"endTime":$endTime,
        			"page":$page,
        			"total":$size
        		},
        		success:function(obj){
        			var $data = obj.data;
        			var $state = "待机";
        			
        			$("#equipmentListmodel").empty()
        			if(obj.code==1){
        				
        				for(var i=0;i<$data.length;i++){
        					
        					if($data[i].equipState==0){
        						$state = "未启用";
        					}else if($data[i].equipState==1){
        						$state = "待机";
        						
        					}else if($data[i].equipState==2){
        						$state = "运行";
        						
        					}else if($data[i].equipState==3){
        						$state = "停机";
        						
        					}else if($data[i].equipState==4){
        						$state = "故障";
        						
        					}else if($data[i].equipState==-1){
        						$state = "失效";
        					}
        					console.log($data.length);
        					$("#equipmentListmodel").append("<li ng-fid='"+$data[i].equipId+"'><p>设备图片:"+$data[i].equipImgur+"</p><p>设备名称:"+$data[i].equipName+"</p><p>设备序列号:"+$data[i].equipSequence+"</p><p>运行状态:<i  class='stateBgColor'>"+$state+"</i></p><p><button class='btn btn-danger' id='delEquip'>删除</button></p></li>");

        				}
        			}
        		}
        	});
        })
         }
        
        //动态挂载事件 将单个设备状态改成 失效-1
     $("body").delegate("#delEquip","click",function(){
     	
      	$this=$(this)
      	var equipId=$this.parents("li").attr("ng-fid")
      	
      	$.ajax({
      		type:"delete",
      		url:"/equipment/equipment.do",
      		data:{
      			"equipId":equipId
      		},
      		success:function(obj){
      			if(obj.code==1){
      				searchEquipment()
      				alert(obj.msg);
      			}
      		}
      	});
      })

    })
</script>
